#home {

  .header {
    background: #0C0F18;
    box-shadow: 0px 20px 50px 0px rgba(22, 28, 42, 0.15);

    .container_content {
      height: 200px;
      display: flex;
      align-items: center;

      .logo {
        width: 232px;
        height: 122px;
        margin-right: 670px;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .btn-container {
      height: 35px;
      font-size: 36px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #0078FF;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 200px;

      .qrcode {
        display: none;
        position: absolute;
        top: 120px;
        right: -50px;
        width: 400px;
        height: 400px;
        box-sizing: border-box;
        padding: 40px;
        background: #232C43;
        border-radius: 10px;

        &::before {
          content: '';
          width: 0;
          height: 0;
          border-left: 40px solid transparent;
          border-right: 40px solid transparent;
          border-bottom: 80px solid #232C43;
          position: absolute;
          top: -65px;
          left: 50%;
          margin-left: -25px;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      .btn-down {
        display: inline-block;
        width: 280px;
        height: 88px;
        background: #0078FF;
        border-radius: 44px;
        font-size: 36px;
        font-family: Arial;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        line-height: 88px;
        position: relative;

        &:hover {
          .qrcode {
            display: block;
          }
        }
      }
    }


  }

  .home-content {
    margin-top: 229px;
    margin-bottom: 216px;
    text-align: center;

    .title-logo {
      background: url('./images/ihtbg.png') no-repeat;
      background-size: cover;
      width: 558px;
      height: 71px;
      border-radius: 20px;
      line-height: 71px;
      text-align: center;
      margin: 0 auto;
      font-size: 32px;
    }

    .title {
      height: 116px;
      font-size: 120px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #D1D9E7;
      margin-top: 138px;
      margin-bottom: 75px;
    }

    .dec {
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #FFFFFF;
      margin-bottom: 200px;
      font-size: 48px;
    }


    .btn-container {
      margin-bottom: 271px;

      .btn {
        display: inline-block;
        width: 408px;
        height: 188px;
        border: 8px solid #0078FF;
        border-radius: 10px;
        text-align: center;
        line-height: 188px;
        font-size: 48px;
        font-family: SourceHanSansCN;
        font-weight: bold;
        color: #0078FF;
      }

      .right_btn {
        margin-left: 106px;
        border: 8px solid #984FE2;
        color: #B165FF;
      }
    }

    .trades {
      .text {

        color: #889BC1;
      }

      .trades_items {
        display: flex;
        justify-content: space-between;

        .item {
          width: 445px;
          height: 124px;
        }
      }
    }


  }


  .trade_records {
    display: flex;
    justify-content: space-between;

    .trade_list {
      width: 1592px;
      height: 1000px;
      border-radius: 20px;
      background: url('./images/main02.jpg') no-repeat;
      background-size: cover;
    }

    .trade_dec {
      padding: 134px 0 0 44px;
      box-sizing: border-box;
      width: 539px;
      height: 1000px;
      background: #111622;
      border-radius: 20px;

      .btn {
        font-size: 48px;
        font-family: SourceHanSansCN;
        font-weight: 800;
        color: #161C2A;
      }

      .title {
        font-size: 48px;
        font-family: SourceHanSansCN;
        font-weight: bold;
        color: #9AA6BE;
        line-height: 68px;
        margin: 118px 0 138px;
      }

      .detail {
        font-size: 36px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #9AA6BE;
        line-height: 50px;

        .first {
          margin-bottom: 100px;
        }
      }
    }
  }


  .advantage {
    background: #161C2A;

    .title {
      font-size: 100px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #D1D9E7;
      text-align: center;
      margin-top: 267px;
      margin-bottom: 188px;
    }

    .advantage_container {
      font-size: 36px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: #6D778B;
    }

    .btn_container {
      margin-bottom: 78px;
    }

    .advantage_item {
      display: flex;
      justify-content: space-around;
      margin-bottom: 288px;
    }

    .btn {
      font-size: 48px;
      font-family: SourceHanSansCN;
      color: #161C2A;
      font-weight: 300;
    }

    .weight {
      font-weight: 700;
    }

    .white {
      color: #FFFFFF;
    }

    .learn_more {
      width: 220px;
      height: 24px;
      background: url('./images/learnmore.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 130px;
    }

    .logo_img {
      width: 866px;
      height: 688px;
      background: url('./images/24_h.png') no-repeat;
      background-size: contain;
    }

    .advantage_dec {
      line-height: 60px;
    }

    .margin_top_100 {
      margin-top: 100px;
    }

    .second {
      .logo_img {
        background: url('./images/bar.png');
      }
    }
  }

  .buy_member {
    background: #0e0e0e;
    padding-top: 140px;
    padding-bottom: 140px;

    .container {
      display: flex;
      justify-content: space-around;
    }


    .item {
      width: 834px;
      height: 1160px;
      background: #161C2A;
      border-radius: 10px;
      position: relative;
      padding-top: 264px;
    }

    .item {
      background: #161C2A url('./images/vip-top.jpg') no-repeat;
      background-size: contain;

      .title {
        text-align: center;
        margin: 0 auto;
        width: 250px;
        height: 200px;
        font-size: 48px;
        font-family: SourceHanSansCN;
        font-weight: bold;
        color: #9AA6BE;
        background: linear-gradient(0deg, #44E1F3 0%, #0078FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 80px;
      }

      .dec {
        text-align: left;
        font-size: 38px;
        font-family: SourceHanSansCN;
        font-weight: 300;
        color: #C9D6F1;
        line-height: 96px;
        padding-left: 240px;

        .text {
          &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background: #0078FF;
            margin-right: 20px;
          }
        }
      }

    }

    .line {
      width: 534px;
      height: 12px;
      background: #111622;
      margin: 0 auto;
    }

    .learn_more {
      height: 27px;
      font-size: 28px;
      font-family: SourceHanSansCN;
      font-weight: 300;
      color: #0078FF;
      line-height: 48px;
      padding-left: 270px;
      margin-top: 70px;
      margin-bottom: 70px;
    }

    .btn {
      width: 477px;
      height: 103px;
      background: #0078FF;
      border-radius: 20px;
      margin: 0 auto;
      color: #FFFFFF;
      text-align: center;
      font-family: SourceHanSansCN;
      font-weight: bold;
      line-height: 103px;
    }

    .experience {
      background: #161C2A url('./images/free-top.jpg') no-repeat;
      background-size: contain;

      .last {
        width: 550px;
        line-height: 40px;
        display: flex;

        &::before {
          width: 30px !important;
        }

      }

      .kefu {
        width: 207px;
        height: 207px;
        margin: 0 auto;
        margin-top: 55px;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .footer {
    background: #000;

    .htrade_app {
      padding-top: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 24px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: #838CA1;

      .logo {
        width: 137px;
        height: 137px;
        margin-right: 44px;
      }

      h6 {
        height: 35px;
        font-size: 36px;
        font-family: SourceHanSansCN;
        font-weight: bold;
        color: #FFFFFF;
        margin: 25px 0;
      }

      .app_down {
        justify-content: center;
        align-items: center;

        img {
          width: 120px;
          height: 120px;
          margin-right: 30px;
        }

        p {
          margin-right: 30px;
        }
      }
    }

    .footer_btn_container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 1302px;
      height: 100px;
      background: #161C2A;
      border-radius: 50px;
      margin: 0 auto;
      font-size: 30px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #0078FF;
      margin-top: 135px;
    }

    .footer_text {
      font-size: 24px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #1E4169;
      padding: 60px 0 100px;
      text-align: center;
    }

  }


}

.cursor {
  cursor: pointer;
}

.flex {
  display: flex;
}